<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>#__pageTitle# #__appTitle# #__siteTitle#</title>
    <link rel="icon" type="image/svg+xml" href="../assets/image/logo.svg" />
    <cms:webpack>
        <file path="../assets/bootstrap-5.3.0/bootstrap.min.css"></file>
        <file path="../assets/font-awesome-4.7.0/css/font-awesome.min.css"></file>
        <file path="../assets/css/global.css"></file>
        <file path="../assets/css/frame.css"></file>
        <file name="Admin" path="../assets/js/admin.js" ></file>
        <plug name="frameSide" path="admin-frame-sider.vue"></plug>
        <file name="topbarRight" path="frame/topbar-right.vue" ></file>
        <file name="topbarApp" path="frame/topbar-app.vue" ></file>
    </cms:webpack>
    <script>
        var admin = new Admin();
        admin.setData(<cms:json data="#TEMPLATE_INIT_DATA#"></cms:json>);
    </script>
</head>
<body>

<div class="frame-header-container" id="frame-header" >
   <div class="frame-header-left">
        <div class="frame-header-logo">
            <img class="logo" id="logo" />
            <div class="frame-header-logo-title">#__appTitle#</div>
        </div>
        <topbar-app></topbar-app>
   </div>
   <div class="frame-header-right">
        <topbar-right></topbar-right>
   </div>
</div>
<div class="frame-sider text-bg-dark" id="frame-sider">
    <frame-sider></frame-sider>
</div>

<div class="frame-body-container" id="frame-body" >
    <cms:template app="#__appName#" path="#NAME#"></cms:template>
</div>

<script>
if (frameSide && frameSide[admin.app]){
    
    document.getElementById('frame-body').classList.add('sider');

    let adminSider = admin.createApp({
        components:{
            frameSider:frameSide[admin.app]
        }
    }).mount('#frame-sider');

}else{
    document.getElementById('frame-sider').classList.add('hide');
    
}

document.getElementById('logo').src = admin.getAppInfo()['icon'];

let topbar = admin.createApp({
    components:{
        topbarApp,
        topbarRight
    }
}).mount('#frame-header');

</script>

</body>
</html>